﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>全屏/整屏滚动组件fullPage演示-垂直滚动</title>
    <style>
        body, div, p {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        html {
            overflow: hidden;
        }

        body {
            width: 100%;
            *cursor: default;
            overflow: hidden;
            font: 16px/1.5 "Microsoft YaHei", Helvetica, STHeiti STXihei, Microsoft JhengHei, Arial;
        }

        #pageContain {
            overflow: hidden;
        }

        .page {
            display: none;
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }

        .contain {
            width: 100%;
            height: 100%;
            display: none;
            position: relative;
            z-index: 0;
        }

        .current .contain, .slide .contain {
            display: block;
        }

        .current {
            display: block;
            z-index: 1;
        }

        .slide {
            display: block;
            z-index: 2;
        }

        .swipe {
            display: block;
            z-index: 3;
            transition-duration: 0ms !important;
            -webkit-transition-duration: 0ms !important;
        }

        .page1 {
            background: url("../img/bg1.jpg") repeat;
            /*background-size: cover;*/
        }

        .page2 {
            background: url("../img/bg2.jpg") repeat;
        }

        .page3 {
            background: url("../img/bg3.jpg") repeat;
        }

        .page4 {
            background: url("../img/bg4.jpg") repeat;
        }

        .page5 {
            background: url("../img/bg5.jpg") repeat;
        }

        .page6 {
            background: url("../img/bg1.jpg") repeat;
        }

        #navBar {
            z-index: 3;
            position: absolute;
            top: 40%;
            right: 3%;
        }

        #navBar .active {
            background: rgb(114, 188, 197);
        }

        #navBar li {
            cursor: pointer;
            margin-bottom: 10px;
            transition: all .7s ease;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            border: solid 1px #ffffff;
        }

        .txt {
            margin-top: 20%;
            font-size: 50px;
            color: #fff;
            text-align: center;
        }
    </style>
</head>

<body>
<div id="pageContain">
    <div class="page page1 current">
        <div class="contain">
            <p class="txt">第一屏</p>
        </div>
    </div>

    <div class="page page2">
        <div class="contain">
            <p class="txt">第二屏</p>
        </div>
    </div>

    <div class="page page3">
        <div class="contain">
            <p class="txt">第三屏</p>
        </div>
    </div>

    <div class="page page4">
        <div class="contain">
            <p class="txt">第四屏</p>
        </div>
    </div>

    <div class="page page5">
        <div class="contain">
            <p class="txt">第五屏</p>
        </div>
    </div>
</div>

<ul id="navBar">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<!--<div style="width: 100%; height: auto; line-height: 25px; text-align: center;">-->
    <!--更多网页特效，请访问<a href="http://www.5iweb.com.cn"><b>网页特效库</b></a>,欢迎加入网页特效库QQ交流群：258242983-->
<!--</div>-->
<!--<div style="width: 320px; height: 250px; position: fixed; right: 0px; top: 0px;">-->
    <!--<script type="text/javascript">-->
        <!--var cpro_id = "u2636040";-->
    <!--</script>-->
    <!--<script src="http://cpro.baidustatic.com/cpro/ui/i.js" type="text/javascript"></script>-->
<!--</div>-->

<script src="../libs/fullPage.min.js"></script>
<script>
    var runPage;
    runPage = new FullPage({
        id: 'pageContain',
        slideTime: 800,
        effect: {
            transform: {
                translate: 'Y'
            },
            opacity: [0, 1]
        },
        mode: 'wheel, touch, nav:navBar',
        easing: 'ease'
    });
</script>

</body>
</html>